Skip to content

feat: ContentHero design update #16032

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

feat: ContentHero design update #16032

wants to merge 2 commits into from

Conversation

wackerow
Copy link
Member

@wackerow wackerow commented Aug 8, 2025

Description

Updates ContentHero according to new /what-is-ethereum designs

  • Removes bg gradient, enlarged font size and increase font weight
  • Updated image handling to be more robust with width/height properties
  • Aside: switched to png for translatathon hero to comply; about the same size for a 3x version, and offers blurred loading state with sizing dimensions

Preview links

Layer 2 pages

Roadmap layout

Staking layout

Translatathon layout

Upgrade layout

Use cases layout

Copy link

netlify bot commented Aug 8, 2025

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit dc57d24
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/689e17ad0911c60008887484
😎 Deploy Preview https://deploy-preview-16032--ethereumorg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 52 (🔴 down 2 from production)
Accessibility: 94 (🔴 down 1 from production)
Best Practices: 92 (no change from production)
SEO: 99 (no change from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions bot added the tooling 🔧 Changes related to tooling of the project label Aug 8, 2025
@wackerow wackerow mentioned this pull request Aug 13, 2025
5 tasks
Copy link
Member

@pettinarip pettinarip left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wackerow looks good, left a question about the hero image dimensions

@@ -73,7 +73,7 @@ export const UpgradeLayout = ({
const heroProps = {
...frontmatter,
breadcrumbs: { slug, startDepth: 1 },
heroImg: frontmatter.image,
heroImg: { src: frontmatter.image, width: 5750, height: 4332 },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a bit unsure about this pattern and whether it's truly needed.

For dynamic images, I assume we'll need to pass width and height for aspect ratio. If so, I'd define these in the ContentHero component, as all images there will likely require consistent dimensions.

Comment on lines -24 to -25
width={760}
height={451}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't we keep these dimensions to keep the same aspect ratio or a calculated width & height to avoid layout shifts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tooling 🔧 Changes related to tooling of the project
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants